<template>
    <div class="">
        <div style="width: auto;height: 400px" id="main"
             v-loading="true"
             element-loading-text="数据加载中...">
        </div>
        <div style="width: auto;height: 400px" id="main2"
             v-loading="true"
             element-loading-text="数据加载中...">
        </div>
        <el-table :data="that.tableData">
            <el-table-column type="index" width="50"/>
            <!--            <el-table-column prop="deviceId" label="风速设备id" width="120"></el-table-column>-->
            <!--            <el-table-column prop="nodeId" label="风速节点id" width="120"></el-table-column>-->
            <el-table-column prop="nodeDescription" label="风速节点描述" width="240"></el-table-column>
            <el-table-column prop="windSpeed" label="风速"></el-table-column>
            <el-table-column prop="nodeDescription2" label="风向节点描述" width="240"></el-table-column>
            <el-table-column prop="windDirection2" label="风向"></el-table-column>
            <!--            <el-table-column prop="deviceId2" label="风向设备id" width="120"></el-table-column>-->
            <!--            <el-table-column prop="nodeId2" label="风向节点id" width="120"></el-table-column>-->
            <el-table-column prop="createTime" label="时间" width="210"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import axios from 'axios'
import * as echarts from "echarts";
import {inject, onMounted, reactive} from "vue";


// 使用 inject 获取全局变量
const $host = inject('$host');
axios.defaults.baseURL = $host

//这里存放数据
const item = {
    id: "0",
    nodeId: "0",
    deviceId: "0",
    nodeDescription: "-。-",
    windSpeed: "xxx",
    createTime: "118，231",
}

const that = reactive({
    tableData: Array(5).fill(item),
    windSpeedData: [],
    tableData2: Array(5).fill(item),
    windDirectionData: []
})

//初始化echarts
function echartsInit() {
    //柱形图
    //因为初始化echarts 的时候，需要指定的容器 id='main'
    echarts.init(document.getElementById('main')).setOption({
        xAxis: {
            type: 'category',
            data: that.windSpeedData.map(item => item[0])
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: that.windSpeedData.map(item => item[1]),
                type: 'line',
                smooth: true
            }
        ]
    })
}

//初始化echarts2
function echartsInit2() {
    //柱形图
    //因为初始化echarts 的时候，需要指定的容器 id='main'
    echarts.init(document.getElementById('main2')).setOption({
        xAxis: {
            type: 'category',
            data: that.windDirectionData.map(item => item[0])
        },
        yAxis: {
            type: 'category'
        },
        series: [
            {
                data: that.windDirectionData.map(item => item[1]).map(item => {
                    switch (item) {
                        case 0:
                            return "北风";
                        case 1:
                            return "东北风";
                        case 2:
                            return "东风";
                        case 3:
                            return "东南风";
                        case 4:
                            return "南风";
                        case 5:
                            return "西南风";
                        case 6:
                            return "西风";
                        case 7:
                            return "西北风";
                    }
                }),
                type: 'line',
                smooth: true
            }
        ]
    })
}

onMounted(() => {
    axios({
        method: 'GET',
        url: '/node-data/list',
        params: {
            sensorEnum: 'WIND_SPEED'
        }
    }).then(({data}) => {
        that.windSpeedData = data.data.reverse().map(item => {
            return [item.createTime, item.windSpeed]
        })
        // 在通过mounted调用即可
        echartsInit()
        // 加载WIND_SPEED表格数据
        that.tableData = data.data.reverse().map(item => {
            item.windSpeed += ' m/s'
            return item
        })
        axios({
            method: 'GET',
            url: '/node-data/list',
            params: {
                sensorEnum: 'WIND_DIRECTION'
            }
        }).then(({data}) => {
            that.windDirectionData = data.data.reverse().map(item => {
                return [item.createTime, item.windDirection]
            })
            // 在通过mounted调用即可
            echartsInit2()
            //加载WIND_DIRECTION表格数据
            that.tableData2 = data.data.reverse().map(item => {
                item.deviceId2 = item.deviceId
                item.nodeId2 = item.nodeId
                item.nodeDescription2 = item.nodeDescription

                switch (item.windDirection) {
                    case 0:
                        item.windDirection = "北风";
                        break;
                    case 1:
                        item.windDirection = "东北风";
                        break;
                    case 2:
                        item.windDirection = "东风";
                        break;
                    case 3:
                        item.windDirection = "东南风";
                        break;
                    case 4:
                        item.windDirection = "南风";
                        break;
                    case 5:
                        item.windDirection = "西南风";
                        break;
                    case 6:
                        item.windDirection = "西风";
                        break;
                    case 7:
                        item.windDirection = "西北风";
                }
                item.windDirection2 = item.windDirection
                return item
            })

            for (let i = 0; i < that.tableData.length; i++) {
                that.tableData[i] = Object.assign(that.tableData2[i], that.tableData[i])
            }


            console.log(that.tableData)
        })
    })
})
</script>
<style scoped>
/* //@import url(); 引入公共css类 */
</style>
